<template>
  <div>
    <city-header></city-header>
    <city-search :city="city"></city-search>
    <city-list
      :city="city"
      :hotcity="hotcity"
      :letter="letter"
    ></city-list>
    <city-alpha
      :city="city"
      @change="handleClick"
    ></city-alpha>
  </div>
</template>

<script>
import axios from 'axios'
import CityHeader from './component/Header'
import CitySearch from "./component/Search"
import CityList from './component/List'
import CityAlpha from './component/Alphabet'
export default {
  name: "City",
  components: {
    CityHeader,
    CitySearch,
    CityList,
    CityAlpha
  },
  data() {
    return {
      city: [],
      hotcity: [],
      letter: ""
    }
  },
  methods: {
    getCityInfo() {
      axios.get("/static/citys.json").then(this.handleGetCityInfoSucc)
    },
    handleGetCityInfoSucc(res) {
      if (res.data) {
        const data = res.data
        this.hotcity = data.hotcity
        this.city = data.city
      }
    },
    handleClick(text) {
      this.letter = text
    }
  },
  mounted() {
    this.getCityInfo()
  }
}
</script>

<style>
html,
body {
  margin: 0;
  padding: 0;
  font-size: 50px;
}
</style>